<template>
  <view
    class="relative bg-white h-[calc(100vh-44px)] bg-[url(https://static.aiwxt.com/channel/oa_client/login_bg.png)] bg-no-repeat bg-[length:100%_100%] bg-left-top"
  >
    <view class="relative w-full h-[30vh]">
      <!-- <image class="absolute left-15 bottom-40 w-90 h-90" src="/static/images/logo.png" mode="scaleToFill" /> -->
    </view>
    <view class="pt-18 mx-15">
      <uni-forms :modelValue="form">
        <view class="bg-[#F6F9FF]">
          <uni-easyinput
            v-model="form.account"
            placeholder="请输入账号"
            :styles="{ backgroundColor: '#F6F9FF' }"
            placeholderStyle="color: #CACACA; font-size: 0.8125rem"
          />
        </view>
        <view class="mt-20 bg-[#F6F9FF]">
          <uni-easyinput
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
            :styles="{ backgroundColor: '#F6F9FF' }"
            placeholderStyle="color: #CACACA; font-size: 0.8125rem"
            @confirm="loginSubmit"
          />
        </view>
      </uni-forms>
      <view
        class="relative mt-30 py-16 primary_btn text-white text-center text-15 rounded-[8px] z-20"
        @click="loginSubmit"
      >
        <text>登录</text>
      </view>
    </view>
    <!-- 三方登录 -->
    <div class="absolute bottom-20 left-0 w-full z-10">
      <view class="text-gray-400 text-center text-12">其他登录方式</view>
      <div class="flex justify-center items-center mt-15">
        <img src="/static/images/wechat.png" class="w-36 h-36" @click="loginByWechat" />
      </div>
      <view class="flex justify-center items-center text-center mt-30">
        <checkbox-group @change="checkboxChange">
          <label class="flex items-center">
            <checkbox value="agree" style="transform: scale(0.7)" color="#1e6af9" />同意
          </label>
        </checkbox-group>
        <view class="flex items-center text-[#1e6af9]">
          <navigator url="/pages/common/protocol" hover-class="none">《网销通用户协议》</navigator>
          <navigator url="/pages/common/privacy" hover-class="none">《隐私政策》</navigator>
        </view>
      </view>
    </div>
  </view>
</template>
<script setup>
import { reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { loginApi, getUserInfoApi, getCustomerInfoApi, loginByWeappApi } from '@/api/user';
import { USER_ACCESS_TOKEN } from '@/libs/config.js';
import { setStorageUserInfo } from '@/utils/utils.js';

let isAgree = false;
const form = reactive({});

onLoad(() => {
  const token = uni.getStorageSync(USER_ACCESS_TOKEN);
  if (token) {
    uni.reLaunch({
      url: '/pages/index/index',
    });
    return;
  }
});
// 登录
async function loginSubmit() {
  if (!form.account || !form.password) {
    uni.showToast({
      title: '请输入账号密码',
      icon: 'error',
    });
    return;
  }
  if (!isAgree) {
    uni.showToast({
      title: '请同意协议和隐私政策',
      icon: 'none',
    });
    return;
  }
  const { code, data } = await loginApi({ ...form });
  if (code === 200) {
    loginSucc(data);
  }
}

async function loginSucc(data) {
  uni.setStorageSync(USER_ACCESS_TOKEN, data.token);
  const { code, data: userInfo } = await getUserInfoApi();
  if (code == 200) {
    const {
      code: code2,
      data: { list = [] },
    } = await getCustomerInfoApi();
    if (code2 == 200) {
      userInfo.customer_id = list?.[0]?.id ?? '';
      userInfo.expiration_time = list?.[0]?.expiration_time ?? '';
    }
    setStorageUserInfo(userInfo);
  }
  uni.showToast({
    title: '登录成功',
    icon: 'success',
  });
  uni.reLaunch({
    url: '/pages/index/index',
  });
}

function checkboxChange({ detail }) {
  isAgree = detail.value.includes('agree');
}

function loginByWechat() {
  if (isAgree) {
    uni.showModal({
      title: '将使用微信登录，是否继续？',
      confirmText: '继续',
      cancelText: '暂不登录',
      success: res => {
        if (res.confirm) {
          wxLogin();
        }
      },
    });
  } else {
    uni.showToast({
      title: '请同意协议和隐私政策',
      icon: 'none',
    });
  }
}

function wxLogin() {
  uni.showLoading({
    title: '登录中',
  });
  uni.login({
    success: async res => {
      const { code, data } = await loginByWeappApi({
        code: res.code,
      });
      if (code === 200) {
        loginSucc(data);
      }
    },
    complete() {
      uni.hideLoading();
    },
  });
}
</script>
